<template>
    <div>
        <div class="base-page" v-show="viewList === true">
            <!-- 列表 -->
            <div class="right">
                <div class="e-table">
                    <div class="top">
                        <div class="left">
                            <div class="left-btn">
                                <el-button type="primary" size="mini"
                                    @click="addEquipData"
                                    class="btn-greenYellow"
                                >新增</el-button>
                            </div>
                        </div>
                        <div class="search_box">
                            <el-input class="ipt" type="text"
                                placeholder="输入搜索关键字"
                                v-model="searchKey"
                                @select="onSearch"
                                @change="onSearch"
                            ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                            <div class="adverse">
                                <el-button type="primary" size="small" @click="onAdvanceSearch">高级搜索</el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="e-table">
                    <el-table
                        :height="rightTableHeight"
                        :data="tableData"
                        border
                        :cell-class-name="cellClsNm"
                        @cell-mouse-enter="cellMouseEnter"
                        @cell-mouse-leave="cellMouseLeave"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        class="table"
                        ref="tableRef"
                        v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'tableRef' }"
                    >
                        <el-table-column label="序号" type="index" fixed width="55"> </el-table-column>
                        <el-table-column prop="billDate" label="年月" width="200"
                            class-name="blue-column"
                        >
                            <template slot-scope="{ row }">
                                <span @click="tableDbEdit(row)">{{ row.billDate || '无'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="orgName" label="机构" show-overflow-tooltip min-width="200"></el-table-column>
                        <el-table-column prop="gmtCreate" label="录入日期" show-overflow-tooltip width="200"> </el-table-column>
                    </el-table>
                </div>
                <Pagination
                    :total="paginationInfo.total"
                    :pageSize.sync="paginationInfo.pageSize"
                    :currentPage.sync="paginationInfo.currentPage"
                    @currentChange="getTableData"
                    @sizeChange="getTableData"
                />
            </div>
        </div>
        <EquipPriceEdit v-if="viewList === 'add' || viewList === 'edit'" :isEdit="viewList" :equipData="selectData" @del="onDel" @save="saveData" @onCancel="viewList=true"></EquipPriceEdit>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import EquipPriceEdit from './equipPriceEdit'
import Pagination from '@/components/pagination/pagination'
import { debounce, advanceSearch, showLoading, hideLoading } from '@/utils/common'
import { mapState } from 'vuex'
import { equipPriceList, addEquipPrice, deleteEquipPrice, updataEquipPrice, getEquipPriceDetail } from '@/api/base/equip'
export default {
    components: {
        Pagination,
        EquipPriceEdit
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            unitMeasure: state => state.equip.equipData.unitMeasure//计量单位
        }),
        // 列表宽度
        rightTableWidth () {
            return (this.screenWidth - 300) + 'px'
        },
        // 列表高度
        rightTableHeight () {
            if (this.paginationInfo.total > 0) {
                return this.screenHeight - 170
            } else {
                return this.screenHeight - 118
            }
        },
        // 分配用户、分配岗位列表宽度
        rightTableWidth2 () {
            return (this.screenWidth - 300) + 'px'
        },
        rightTableHeight2 () {
            return this.screenHeight - 210
        }
    },
    data () {
        return {
            viewList: true, // 显示列表还是编辑界面: true 显示列表 false 显示编辑界面
            searchKey: '',
            treeData: [],
            currentRow: null,
            paginationInfo: {
                total: 0,
                pageSize: 20,
                currentPage: 1,
            },
            tableData: [],
            allData: [],
            formData: {
                'basicPrice': {
                    'billDate': '',
                    'billId': '',
                    'gmtCreate': '',
                    'gmtModified': '',
                    'orgId': '',
                    'orgName': '',
                    'recorderDate': ''
                },
                'basicPriceSettingList': [
                    {
                        'accountId': '',
                        'billDate': '',
                        'changeType': 0,
                        'equipmentId': '',
                        'equipmentName': '',
                        'equipmentNo': '',
                        'gmtCreate': '',
                        'gmtModified': '',
                        'marketPrice': 0,
                        'modifier': '',
                        'modifierId': '',
                        'onlinePrice': 0,
                        'orgId': '',
                        'orgName': '',
                        'priceSettingId': '',
                        'recorder': '',
                        'recorderId': '',
                        'specificationModel': '',
                        'standingBookType': 0,
                        'timeUnit': '',
                        'unit': ''
                    }
                ]
            },
            categoryData: {

            },
            currencyOptions: [],
            tabsName: 'baseInfo',
            tableData2: [],
            MouseEnterId: 0,
            screenWidth: 0,
            screenHeight: 0,
            lastConHeight: 0,
            clickTabFlag: false, // 如果手动点击时，则不做滚动事件逻辑，只有滚动屏幕时才走滚动事件逻辑
            idsTop: [],
            selectData: {},
            stateList: [
                {
                    label: '停用',
                    value: '1'
                },
                {
                    label: '启用',
                    value: '2'
                },
            ], //设备状态
        }
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
        this.getDicValue()
        this.getTableData()
    },
    methods: {
        //获取当前使用的字典
        getDicValue () {
            this.$store.dispatch('equip/setUnitMeasur')//更新计量单位
        },
        async getTableData () {
            showLoading()
            try {
                this.formData.limit = this.paginationInfo.pageSize
                this.formData.page = this.paginationInfo.currentPage
                const resData = await equipPriceList(this.formData)
                this.tableData = resData.list
                this.paginationInfo.total = resData.totalCount
                hideLoading()
            } catch (error) {
                hideLoading()
            }
        },
        addEquipData () {
            this.viewList = 'add'
        },
        tableDbEdit (row) {
            getEquipPriceDetail({ id: row.billId }).then(res=>{
                this.selectData = res
                this.viewList = 'edit'
            })
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.equipmentId
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        onSearch (e) {
            console.log('e', e)
            let searchKey = e
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            this.paginationInfo.currentPage = 1
            this.formData.keyword = searchKey
            this.getTableData()
        },
        onAdvanceSearch () {
            advanceSearch().then(res => {
                alert(JSON.stringify(res))
            })
        },
        goList () {
            this.viewList = true
        },
        handleCurrentChange (val) {
            console.log('handleCurrentChange: ', val)
            this.currentRow = val
        },
        onCancel () {
            this.viewList = true
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
        goCategoryManage () {
            this.$router.push('/categoryManage')
        },
        saveData (data) {
            if(!data) return
            if(this.viewList === 'add') {
                addEquipPrice(data).then(()=>{
                    this.clientPop('suc', '保存成功', ()=>{ this.viewList = true;this.paginationInfo.currentPage = 1;this.getTableData() })
                })
            }else if(this.viewList === 'edit') {
                updataEquipPrice(data).then(()=>{
                    this.clientPop('suc', '保存成功', ()=>{ this.viewList = true;this.paginationInfo.currentPage = 1;this.getTableData() })
                })
            }
        },
        onDel (data) {
            this.clientPop('info', '确定要删除吗？数据删除后不可恢复，请谨慎操作！', () => {
                deleteEquipPrice({
                    priceSettingId: data.billId
                }).then(()=>{
                    this.clientPop('suc', '删除成功', ()=>{
                        this.viewList = true
                        this.paginationInfo.currentPage = 1
                        this.getTableData()
                    })
                })
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.blue-column span{
    display: block;
}
</style>
